// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@import '../../common/styles/colors.scss';
@import '../../common/styles/common.scss';

.failure-instance-panel {
    .observed-failure-textfield {
        padding-bottom: 12px;
    }

    :global(.header-text) {
        font-size: 21px;
    }
}

.failure-instance-snippet-empty-body {
    margin-top: 8px;
    margin-bottom: 24px;
    color: $secondary-text;
}

.failure-instance-snippet-title {
    margin-top: 24px;
    margin-bottom: 8px;
    color: $primary-text;
}

.failure-instance-selector-note {
    color: $secondary-text;
    margin-top: 8px;
    margin-bottom: 8px;
}

.failure-instance-snippet-filled-body {
    margin-top: 8px;
    margin-bottom: 24px;
    padding-top: 12px;
    padding-right: 16px;
    padding-bottom: 12px;
    padding-left: 16px;
    max-height: 200px;
    color: $primary-text;
    background-color: $neutral-4;
    overflow-y: scroll;
    word-wrap: break-word;
}

.failure-instance-snippet-error {
    margin-top: 9px;
    margin-bottom: 50px;
    margin-left: 9px;
    color: $secondary-text;
    display: flex;
    flex-direction: row;
}

.failure-instance-snippet-error-icon {
    color: $negative-outcome;
    padding-top: 3px;
    padding-right: 8px;
    padding-bottom: 3px;
    padding-left: 8px;
}

.edit-button {
    font-size: 16px !important;
    line-height: 24px !important;
    color: $neutral-100 !important;

    &:hover,
    &:focus {
        color: linktext !important;
    }

    @media screen and (forced-colors: active) {
        @include fluent-forced-color-adjust-override;

        color: inherit !important;

        &:hover,
        &:focus {
            color: initial !important;
        }
    }
}
